import React from "react";
import styles from './index.module.less'
import { Success, Cross } from '@react-vant/icons'
import { useEffect } from "react";

const toastObj = {
    showToast: true,
    msg: '登录成功',
    type: 'success',
    duration: 3000,
}

const newToastObj = new Proxy(toastObj, {
    set(target, prop, value) {
        target[prop] = value;
        if (prop === 'showToast') {
            if (value === false) {
                target.msg = '';
                target.type = '';
                target.duration = 0;
            }
        }
    }
})


export default function Toast() {
    const { msg, type, duration, showToast } = toastObj;
    useEffect(() => {
        const timer = setTimeout(() => {
            toastObj.showToast = false;
        }, duration)
    }, [])


    return (showToast && (
        <div className={styles.toast}>
            <div className={styles['toast-content']}>
                <div className={styles['toast-icon']}>
                    {type === 'success' ? <Success /> : <Cross />}
                </div>
                <div className={styles['toast-title']}>
                    {msg}
                </div>
            </div>
        </div>
    ))
}
